<!DOCTYPE html>
<html>
<head>
    <link href="/assets/favicon.ico" rel="shortcut icon">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>lingkang的个人博客</title>
    <link rel="stylesheet" type="text/css" href="/assets/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--头部-->
{{ template "layout-head.html" .head }}
<div class="banner">
    <div class="cont w1000">
        <div class="title">
            <h3>MY<br>BLOG</h3>
            <h4>well-balanced heart</h4>
        </div>
        <div class="amount">
            <p><span class="text">访问量</span><span class="access">1000</span></p>
            <p><span class="text">日志</span><span class="daily-record">1000</span></p>
        </div>
    </div>
</div>
<div class="tlinks">Collect from <a href="http://www.cssmoban.com/">网页模板</a></div>
<div class="content">
    <div class="cont w1000">
        <div class="title" id="see">
            <span class="layui-breadcrumb article-class" lay-separator="|" style="visibility: visible;">
                {{range $i, $v := .articleClass}}
                    <a href="/?cid={{$v.Id}}" class="{{if eq $v.Id $.cid }}active {{end}}article-class-id"
                       id="article-class-{{ $i }}">{{ $v.Name }}</a><span
                    lay-separator="">|</span>
                {{end}}
            </span>
        </div>
        <div class="list-item">
            {{range $si, $sv := .sArticle}}
            <div class="item">
                <a href="/article/details/{{$sv.Id}}">
                    <div class="layui-fluid">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                                <div class="img"><img src="/assets/img/sy_img1.jpg" alt=""></div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                                <div class="item-cont">
                                    <h3>{{$sv.Title}}
                                        {{if le $si 2}}
                                        <button class="layui-btn layui-btn-danger new-icon">new</button>
                                        {{end}}
                                    </h3>
                                    <h5>设计文章</h5>
                                    <p>{{$sv.ShortContent}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            {{end}}

        </div>
        <div style="text-align: center;">
            <div id="page"></div>
        </div>
    </div>
</div>

<div class="footer-wrap">
    <div class="footer w1000">
        <div class="qrcode">
            <img src="/assets/img/erweima.jpg">
        </div>
        <div class="practice-mode">
            <img src="/assets/img/down_img.jpg">
            <div class="text">
                <h4 class="title">我的联系方式</h4>
                <p>微信<span class="WeChat">1234567890</span></p>
                <p>邮箱<span class="email">1234567890@qq.com</span></p>
                <p>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect
                    from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/assets/layui/layui.js"></script>
<script type="text/javascript">
    function toArticle(id) {
        window.location.href = '/article/details/' + id
    }

    var $
    layui.use(['layer', 'laypage', 'jquery'], function () {
        var layer = layui.layer
            , laypage = layui.laypage;
        $ = layui.jquery

        $('.article-class').click(function (e) {
            var target = e.target;
            if (target != null && target.outerHTML.indexOf('</a>') != -1) {
                $('.article-class .active').removeClass('active')
                $(target).addClass("active")
            }
        })

        //执行一个laypage实例
        laypage.render({
            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            , count: `{{ .count }}` //数据总数，从服务端得到
            , limit: 7
            , curr: `{{ .currentPage }}`
            , jump: function (obj, first) {
                if (!first) {
                    var href = window.location.href
                    var queryVariable = getQueryVariable('page');
                    if (queryVariable) {
                        href = href.replace('page=' + queryVariable, 'page=' + obj.curr)
                    } else {
                        if (href.indexOf("?") == -1) {
                            href += '?'
                        }
                        href += '&page=' + obj.curr
                    }
                    window.location.href = href
                }
            }
        });

        // 点击文章分类
        $('.article-class-id').click(function () {

        })

        if (window.location.href.indexOf('cid') != -1) {
            $('html').animate({
                scrollTop: $('#see').offset().top - 10
            }, 100);//0.1秒滑动到指定位置
        }
    });

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return false
    }
</script>

</body>
</html>